import { Component, Fragment } from 'react';
import { connect } from 'dva';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandartTable from '../../components/StandardTable';

import {Select,Radio, Divider, Button, Card, Dropdown, Menu, Icon, Form, Input,InputNumber, Modal, Popconfirm } from 'antd';

import styles from './Class';
const {TextArea} = Input
@connect(
    ({ class:{classes},loading }) => ({
      
        classes,
        loading: loading.effects['class/query'],
        adding: loading.effects['class/add'],
        removing:loading.effects['class/remove']
      }),
     dispatch => ({
      query() {
        console.log('23232')
        return dispatch({ type: 'class/query' })
      },
        remove(params) {
          console.log('pro_obj')
            console.log(params)
            return dispatch({ type: 'class/remove', payload: params });
          },
        add(params) {
          console.log('params')
      // params =  JSON.stringify(params) 
          return dispatch({ type: 'class/add', payload: params });
        },
       })
)
@Form.create()
class ProductList extends Component {
  state = {
    selectedRows: [],
    modalNewVisible: false,
  };

  handleSelectRow = rows => {
    this.setState({ selectedRows: rows });
  };

  handleDeleteOne = obj => {
    const { remove ,query,loading} = this.props;
    console.log(obj)

    remove(obj);

   
    query();
  };
  

  handleDeleteList = () => {
    const { selectedRows } = this.state;
    const { remove } = this.props;
    remove(selectedRows);
  };
  handleStatusOne(obj){
    const { remove } = this.props;
    remove([obj]);
  }

  handleNewModelVisible(){
      const {modalNewVisible}=this.state
      const {loading,query}=this.props
      console.log(loading)
      query();
      this.setState({
          modalNewVisible:!modalNewVisible
      })
  }

  handleNewPD_OK(){
      const {add,form}=this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        console.log(fieldsValue)
        add(fieldsValue).then((res) => {
            console.log(res)
          this.handleNewModelVisible();
        
          form.resetFields();
        });
      });
  }

  render() {
    const { selectedRows } = this.state;

    const columns = [
      {
        title: '编号',
        dataIndex: '_id',
      },
      {
        title: '名称',
        dataIndex: 'name',
      },
     
      {
        title: '操作',
        render: (txt, row, idx) => (
          <Fragment>
           
            <Popconfirm
              title="将删除所有记录"
              okText="删除"
              cancelText="取消"
              onConfirm={() => this.handleDeleteOne(row)}
            >
              <Button type="primary" size="small">
                删除
              </Button>
             
            </Popconfirm>
         
    
          </Fragment>
        ),
      },
    ];
    const menu = (
      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
        <Menu.Item key="remove">删除</Menu.Item>
      </Menu>
    );

    const { loading, form, removing, adding,classes} = this.props;
    console.log('classes')
   console.log(classes)

   
    const { modalNewVisible } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <PageHeaderLayout title="品类浏览">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
            <Button icon="plus" type="primary" onClick={() => this.handleNewModelVisible()}>
                添加品类
              </Button>
              {/* {selectedRows.length > 0 && (
                <span>
                  <Popconfirm
                    title="将删除所选记录"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={this.handleDeleteList}
                  >
                    <Button loading={removing}>批量删除</Button>
                  </Popconfirm>
                </span>
              )} */}
            </div>
            <StandartTable
              rowKey="id"
              selectedRows={{}}
            //   onSelectRow={this.handleSelectRow}
            // rowSelection={null}
              data={{ list:classes }}
              columns={columns}
              onChange={e => console.log(e)}
            />
          
          </div>
          <Modal
            visible={modalNewVisible}
            title="添加职位"
            onOk={() => this.handleNewPD_OK()}
            onCancel={() => this.handleNewModelVisible()}
            confirmLoading={adding}
          >
    
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="名称">
              {form.getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入品类名称' }],
              })(<Input placeholder="请输入品类名称" />)}
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="编号">
              {form.getFieldDecorator('_classId', {
                rules: [{ required: true, message: '编号' }],
              })(<InputNumber placeholder="请输入品类编号" />)}
            </Form.Item>
         
      
          </Modal>
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default ProductList;
